<!-- 基地管理 -->
<template>
    <div class="base_manager">
        <el-main class="base_main_content">
            <div class="base_screen_header">
                <div></div>
                <el-form :inline="true" class="base_search_form" @submit.prevent>
                    <el-form-item>
                        <el-input v-model="name" @keyup[native].enter="searchName" @change="searchName" placeholder="基地名称"
                            clearable :suffix-icon="Search" />
                    </el-form-item>
                </el-form>
            </div>
            <DataCollectTable :data="data" :total="total" :config="config" @operationsHander="opHander.receive">
            </DataCollectTable>
        </el-main>
    </div>
</template>

<script setup>
import DataCollectTable from '@com/table/DataCollectTable.vue'
import { OP_KEY, OPERATIONS, operationsHander } from "@com/table/tableOperations";
import { ref, reactive } from 'vue'
import $ from "@util/base"
import { $msg, $box } from "@ui/msg";
import { Search } from '@element-plus/icons-vue'
import useRoute from "@util/router";
import api from "@api/finance"

const route = useRoute()

route.watchRouter('basemanager2', () => { getBaseList() })

const name = ref(route.query().name || '')

function searchName(val) {
    route.replaceQuery('name', val)
}

const data = ref([])
const total = ref(0)

function roleOperations() {
    return [OPERATIONS.check]
}
const config = {
    showIndex: true,
    operations: {
        label: '操作',
        width: 120,
        operations: roleOperations
    },
    column: [
        {
            label: '基地名称',
            prop: 'name',
            width: 180,
        }, {
            label: '收款金额（元）',
            prop: 'dueMoney',
        }, {
            label: '单数（笔）',
            prop: 'payNum',
            width: 100,
        }, {
            label: '退款金额（元）',
            prop: 'refundMoney',
            width: 130,
        }
    ]
}

const opHander = operationsHander()
opHander.install(OP_KEY.check, (data) => {
    route.push({ name: 'overview', query: { base: data.code } })
})

getBaseList()
function getBaseList() {
    let routeQuery = route.query()
    api.baseList(
        routeQuery.name,
        routeQuery.p,
        routeQuery.s
        , val => {
            total.value = val.total
            data.value = val.itemList
        })
}

</script>